<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 500;
        canvas.height = 420;

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        
        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY, headLength = 8) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Draw the coordinate system
        ctx.font = 'italic 20px serif';
        const axisOrigin = { x: 100, y: 220 };
        const axisLength = 50;
        // x-axis
        drawArrow(axisOrigin.x, axisOrigin.y, axisOrigin.x, axisOrigin.y - axisLength);
        ctx.fillText('x', axisOrigin.x - 15, axisOrigin.y - axisLength);
        // y-axis
        drawArrow(axisOrigin.x, axisOrigin.y, axisOrigin.x + axisLength * 0.8, axisOrigin.y + axisLength * 0.4);
        ctx.fillText('y', axisOrigin.x + axisLength * 0.8 + 5, axisOrigin.y + axisLength * 0.4 + 5);
        // z-axis
        drawArrow(axisOrigin.x, axisOrigin.y, axisOrigin.x - axisLength * 0.8, axisOrigin.y + axisLength * 0.4);
        ctx.fillText('z', axisOrigin.x - axisLength * 0.8 - 10, axisOrigin.y + axisLength * 0.4 + 5);

        // Draw the rectangular parallelepiped block
        ctx.lineWidth = 2;
        const A = {x: 205, y: 170}; // front-top-left
        const B = {x: 205, y: 255}; // front-bottom-left
        const E = {x: 365, y: 170}; // front-top-right
        const F = {x: 365, y: 255}; // front-bottom-right
        const C = {x: 235, y: 150}; // back-top-left
        const G = {x: 395, y: 150}; // back-top-right
        const H = {x: 395, y: 235}; // back-bottom-right
        
        ctx.beginPath();
        // Visible faces
        ctx.moveTo(A.x, A.y); ctx.lineTo(B.x, B.y);
        ctx.lineTo(F.x, F.y); ctx.lineTo(E.x, E.y); ctx.lineTo(A.x, A.y); // Front face
        ctx.moveTo(A.x, A.y); ctx.lineTo(C.x, C.y);
        ctx.lineTo(G.x, G.y); ctx.lineTo(E.x, E.y); // Top face
        ctx.moveTo(G.x, G.y); ctx.lineTo(H.x, H.y);
        ctx.lineTo(F.x, F.y); // Right face
        ctx.stroke();

        // Draw vectors H and v
        // H vector
        drawArrow(300, 140, 300, 80);
        ctx.fillText('H', 305, 100);
        // v vector
        drawArrow(F.x, (F.y + E.y) / 2, F.x + 50, (F.y + E.y) / 2 - 5);
        ctx.fillText('v', F.x + 20, (F.y + E.y) / 2 - 15);

        // Draw dimension labels
        ctx.lineWidth = 1.5;
        // Dimension 'a'
        ctx.beginPath();
        ctx.moveTo(B.x, B.y + 10); ctx.lineTo(B.x, B.y + 20);
        ctx.moveTo(F.x, F.y + 10); ctx.lineTo(F.x, F.y + 20);
        ctx.moveTo(B.x, B.y + 15); ctx.lineTo(F.x, F.y + 15);
        ctx.stroke();
        ctx.fillText('a', (B.x + F.x) / 2 - 5, B.y + 38);

        // Dimension 'b'
        ctx.beginPath();
        ctx.moveTo(E.x + 5, E.y); ctx.lineTo(E.x + 15, E.y);
        ctx.moveTo(F.x + 5, F.y); ctx.lineTo(F.x + 15, F.y);
        ctx.moveTo(E.x + 10, E.y); ctx.lineTo(F.x + 10, F.y);
        ctx.stroke();
        ctx.fillText('b', E.x + 20, (E.y + F.y) / 2 + 5);

        // Dimension 'c'
        ctx.beginPath();
        ctx.moveTo(A.x+5, (A.y+B.y)/2 + 20); ctx.lineTo(A.x+15, (A.y+B.y)/2 + 20 - 5); // arrow 1
        ctx.moveTo(A.x+13, (A.y+B.y)/2 + 10); ctx.lineTo(C.x-13, (C.y+D.y)/2 + 10); // line not drawn, just for positioning
        ctx.moveTo(C.x-5, (C.y+H.y-20)/2 - 20); ctx.lineTo(C.x-15, (C.y+H.y-20)/2 - 15); // arrow 2
        
        ctx.moveTo(218, 160); ctx.lineTo(213, 162); // arrow tip
        ctx.moveTo(218, 160); ctx.lineTo(221, 164);
        
        ctx.moveTo(227, 222); ctx.lineTo(232, 220); // arrow tip
        ctx.moveTo(227, 222); ctx.lineTo(224, 218);

        ctx.stroke();
        ctx.fillText('c', 215, 190);
        
        // Symbols on the left face (+, -, diamond)
        ctx.font = '24px serif';
        // Minus sign
        ctx.fillText('−', 213, 250);
        // Plus sign - implicitly handled by diamond symbol's location
        // Diamond symbol
        ctx.beginPath();
        const d_center = { x: 220, y: 220 };
        const d_size = 5;
        ctx.moveTo(d_center.x, d_center.y - d_size); // top
        ctx.lineTo(d_center.x + d_size, d_center.y); // right
        ctx.lineTo(d_center.x, d_center.y + d_size); // bottom
        ctx.lineTo(d_center.x - d_size, d_center.y); // left
        ctx.closePath();
        ctx.fill();

        // Draw the figure caption
        ctx.font = 'bold 20px serif';
        ctx.fillText('Fig. 2.55', canvas.width / 2 - 40, 380);

    </script>
</body>
</html>